/*
  学习目标：jsx的插值表达式 - 与vue是一样的
  表达式： 可以写在等号右边
  1. 基本类型 number string boolean undefined null
  2. 对象，数组
  3. 其他： 函数、三元、逻辑、 JSX本身
*/
import React from 'react';
import ReactDOM from 'react-dom';
// 函数本质上，也是一个对象，所以不能直接渲染
function hello() {
  return 'hello react';
}

const isShow = false;
const divNode = (
  <>
    <div>{hello()}</div>
    {/* 三元 */}
    <div>{isShow ? '显示' : '不显示'}</div>
    {/* 逻辑 */}
    <div>{isShow && '显示'}</div>
    <div>{!isShow && '不显示'}</div>

    {/* jsx本身也可以渲染，但是有点多此一举，一般会配合 逻辑运算 */}
    {<div>JSX本身</div>}
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
